<div th:fragment="control_table_overview">
<script type="text/javascript">
	var get_overview_table_option = function()
	{
		return {
			columns : [ {
				field : "NAME",
				data : [ "1月", "2月", "3月" ]
			}, {
                field : "SUMVALUE",
                data : [ 100, 90, 80 ]
            }, {
                field : "DW",
                data : [ "人","人","个" ]
            } ],
			showDw:true,
			showNumber:false,
			rows : 3,
			sql : ""
		};
	}

	function metadata_overviewtable(params)
	{
		var opt = get_overview_table_option();
		params = $.extend({}, {
			COLUMN : {},
			SQL : "",
			OPTION : opt
		}, params);
		return $.extend(new metadata_chart_base(params), this);
	}

	function metadata_view_overviewtable(control)
	{
		this.COLUMN = function()
		{
			var _this = this;
			var view = $($("#OVERVIEW_TOPTABLECOLUMNS").html());
			var option = this.control.getMetadata("OPTION");
			view.find("input[name=col1]").val(option.columns[0].field);
			view.find("input[name=col2]").val(option.columns[1].field);
			view.find("input[name=col3]").val(option.columns[2].field);
			view.find("input").keyup(function()
			{
				option.columns[0].field = view.find("input").eq(0).val();
				option.columns[1].field = view.find("input").eq(1).val();
				option.columns[2].field = view.find("input").eq(2).val();
				_this.linkViewOption(option);
			});
			this.settingPanel.append(view);
		}
		return $.extend(new metadata_view_toptable(control), this);
	}

	function metadata_form_view_overviewtable(control)
	{
		this.control = control;
		this.echart = chartTableTop.init($(control).find(".echarts-div")[0]);
		this.OPTION = function(value)
		{
			this.echart.setOption(value);
		}
		return $.extend(new metadata_form_view_chart_base(control), this);
	}
</script>

<!-- 控制面板 TOP表格 列配置 -->
<script type="text/html" id="OVERVIEW_TOPTABLECOLUMNS">
<div class="form-setting-group">
	<table class="setting-control-table">
		<tr class="setting-control-title">
			<td colspan="6">列配置</td>
		</tr>
		<tr>
			<td class="setting-control-label100">第一列字段名</td>
			<td><input name="col1" class="form-control"></td>
			<td class="setting-control-label100">第二列字段名</td>
			<td><input name="col2" class="form-control"></td>
			<td class="setting-control-label100">第三列字段名</td>
			<td><input name="col3" class="form-control"></td>
		</tr>
	</table>
</div>
</script>

</div>
